<template>
    <div class="app-container">
        <!-- 添加或修改用户 -->
        <el-form ref="form" :model="userForm" :rules="rules"  label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="工号" prop="employeeId">
                        <el-input v-model="userForm.employeeId" :disabled="userForm.id != null ? true : false" placeholder="请输入工号" style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="employeeName">
                        <el-input v-model="userForm.employeeName" :disabled="userForm.id != null ? true : false" placeholder="请输入姓名" style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" prop="employeeSex">
                        <el-select v-model="userForm.employeeSex" placeholder="请选择性别" size="small" style="width: 100%">
                            <el-option
                                    v-for="sex in sexList"
                                    :key="sex.code"
                                    :label="sex.name"
                                    :value="sex.code"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" >
                        <el-select v-model="userForm.employeeStatusInfo" value-key="code" placeholder="请选择状态" size="small" style="width: 100%">
                            <el-option
                                    v-for="employeeStatus in basicData"
                                    :key="employeeStatus.code"
                                    :label="employeeStatus.name"
                                    :value="employeeStatus"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="入职时间" prop="employeeEntryTime">
                        <el-date-picker type="date" v-model="userForm.employeeEntryTime" placeholder="请选择入职日期"  style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属组织" prop="orgName">
                        <el-input v-model="userForm.orgName" :disabled="true"  style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="工种" >
                        <el-select v-model="userForm.employeeDutyInfo" value-key="code" placeholder="请选择工种" multiple  size="small" style="width: 100%">
                            <el-option
                                    v-for="employeeDuty in employeeDutyData"
                                    :key="employeeDuty.code"
                                    :label="employeeDuty.name"
                                    :value="employeeDuty"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电话" prop="employeeTelephone">
                        <el-input v-model="userForm.employeeTelephone" placeholder="请输入电话"  style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="岗位" prop="employeeJob">
                        <el-input v-model="userForm.employeeJob" placeholder="请输入岗位"  style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-row>

            <!--<el-form-item label="父级ID" prop="parentCode">
                <el-input v-model="deptForm.parentCode" />
            </el-form-item>
            <el-form-item label="ID" prop="id">
                <el-input v-model="deptForm.id" />
            </el-form-item>-->
        </el-form>
        <div class="dialog-footer" style="float:right">
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
</template>

<script>
    import {getLevelThreeType} from '@/api/basicdata/basictype'
    import {addEmployee, editEmployeeWithFile} from '@/api/basicdata/employee'
    export default {
        name: "userForm",
        props: {
            // 用户表单信息
            userForm: Object,
        },
        data() {
            return {
                // 按钮loading
                buttonLoading: false,
                params: {
                    organizationId: undefined
                },
                // 性别
                sexList: [{ name: '男', code: '男' }, { name: '女', code: '女' }],
                // 用户状态字典数据
                basicData: [],
                // 工种字典数据
                employeeDutyData:[],
                // 表单校验
                rules: {
                    employeeId: [
                        { required: true, message: "工号不能为空", trigger: "blur" }
                    ],
                    employeeName: [
                        { required: true, message: "姓名不能为空", trigger: "blur" }
                    ],
                    employeeSex: [
                        { required: true, message: "性别不能为空", trigger: "blur" }
                    ],
                    orgName: [
                        { required: true, message: "所属组织不能为空", trigger: "blur" }
                    ],
                    employeeJob: [
                        { required: true, message: "岗位不能为空", trigger: "blur" }
                    ],
                },


            }
        },
        created() {
            // 初始化人员状态字典
            this.getUserDictData();
            // 初始化工种字典
            this.getEmployeeDuty();
        },
        methods: {

            /** 获取人员状态三级数据 */
            getUserDictData() {
                const data = {'searchParams': {pcode: 'E03000'}}
                getLevelThreeType(data).then(res => {
                    this.basicData = res.responseBody.result
                })
            },

            /** 获取工种字典三级数据 */
            getEmployeeDuty() {
                const data = {'searchParams': {pcode: 'E01000'}}
                getLevelThreeType(data).then(res => {
                    this.employeeDutyData = res.responseBody.result
                })
            },

            // 给页面添加权限数据
            submitForm() {
                // console.log('pageInfo===:', JSON.stringify(this.pageInfo))
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        const userFormStr = new FormData();
                        this.userForm.employeeTag = this.userForm.employeeTag === undefined ? '1' : this.userForm.employeeTag;
                        userFormStr.append('EmployeeBasicNewDTO',JSON.stringify(this.userForm));
                        this.buttonLoading = true;
                        if (this.userForm.id != null) {
                            editEmployeeWithFile(userFormStr).then(res => {
                                if (res.retCode === '200') {
                                    this.$message.success('修改成功')
                                    // 重新加载
                                    this.params.organizationId = this.userForm.organizationId;
                                    this.$emit("submitForm",this.params);
                                } else {
                                    this.$message.error('修改失败...')
                                }
                                this.$emit("userCallBack",this.userForm);
                            }).finally(() => {
                                this.buttonLoading = false;
                            });
                        } else {
                            addEmployee(userFormStr).then(res => {
                                if (res.retCode === '200') {
                                    if (res.responseBody !== 0) {
                                        this.$message.success('添加成功')
                                        // 重新加载
                                        this.$emit("submitForm",this.params);
                                    } else {
                                        this.$message.error('数据已存在！');
                                    }
                                } else {
                                    this.$message.error('添加失败...')
                                }
                                this.$emit("userCallBack",this.userForm);
                            }).finally(() => {
                                this.buttonLoading = false;
                            });
                        }
                    }
                });
            },
            // 取消按钮
            cancel() {
                // 清空
                this.$emit("userCallBack",this.userForm);
            },
        }

    }

</script>
